<section id="rbac">
  <div class="clearfix">
    <!-- 组织部分 -->
    <div class="pull-left border-r" style="width: 235px;overflow:hidden;">
      <div class="left-tissue">
        <div class="tissue-button-wrap">
          <div class="tissue-button cursor" :class="{'tissue-button-active': (memberActive == item.orgType) && memberData.length > 1}" @click="tabNav(item)" v-for="item in memberData">{{item.shortName}}</div>
        </div>
        <div class="tissue-list">
          <ul class="framework-tree-wrap">
            <treerbac class="rbac-tissue" :key="index" @change="getPidData" :model="treeList">
            </treerbac>
          </ul>
        </div>
      </div>
    </div>

    <!-- 右侧成员部分 -->
    <div class="pull-right right-wrap-tissue">
      <div class="leadperson-config">
        <div class="title-config clearfix">
          <div class="pl-12 pull-left dy-flex" style="color:rgba(165,170,183,1);" >负责人配置
            <div class="dy-flex sj-kf color-999" v-if="permissions.indexOf('c369') > -1"><div class="sj-blank"></div>客户数据开放<hl-switch style="margin-left:11px" :active="activeAdmin" :failuretext="!ids.memberId?'请先选中组织':''" @switchactive="switchCustomer($event,'admin')"></hl-switch></div>
          </div>
          <div class="pull-right color-666 mr-10 cursor" @click="getAdminProject" v-if="permissions.indexOf('c187') > -1"><span class="icon-Org-project color-primary mr-5"></span>授权项目</div>
          <div style="height:26px; margin-top: 8px;" class="border-r pull-right mr-10"></div>
          <div class="pull-right color-666 mr-10 cursor" @click="setAuthAdmin" v-if="permissions.indexOf('c186') > -1"><span class="icon-Org-powers color-primary mr-5"></span>授权权限</div>
        </div>
        <div style="width:760px;overflow:hidden;">
          <div class="person-wrap">
            <ul>
              <li v-for="item in adminData" class="border-b" :class="{'active-person': item.flag}"><span class="mr-24">{{ item.memberName }}</span><span> {{ item.userAccount }} </span></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="leadperson-config mt-15">
        <div class="title-config clearfix">
          <div class="pl-12 pull-left dy-flex" style="color:rgba(165,170,183,1);">成员配置
            <div class="dy-flex sj-kf color-999" v-if="permissions.indexOf('c369') > -1"><div class="sj-blank"></div>客户数据开放<hl-switch style="margin-left:11px" :active="activeMember" :failuretext="!ids.memberId?'请先选中组织':''" @switchactive="switchCustomer($event,'member')"></hl-switch></div></h4>
          </div>
          <div class="pull-right color-666 mr-10 cursor" @click="getMemberProject" v-if="permissions.indexOf('c187') > -1"><span class="icon-Org-project color-primary mr-5"></span>授权项目</div>
          <div style="height:26px; margin-top: 8px;" class="border-r pull-right mr-10"></div>
          <div class="pull-right color-666 mr-10 cursor" @click="setAuthMember" v-if="permissions.indexOf('c186') > -1"><span class="icon-Org-powers color-primary mr-5"></span>授权权限</div>
        </div>
        <div style="width: 760px;overflow:hidden;padding-bottom:10px;padding-top:10px;">
          <div class="person-wrap1 text-center">
            <div style="width: 750px;padding-left:10px;">
              <div class="border br-4">
                <ul class="dy-flex" style="background:rgba(240,242,255,1);line-height:40px;">
                  <li class="dy-fx-1">序</li>
                  <li class="dy-fx-2">姓名</li>
                  <li class="dy-fx-3">账号</li>
                  <li class="dy-fx-2">职位</li>
                  <li class="dy-fx-2 border-l" v-show="permissions.indexOf('c188') > -1">操作</li>
                </ul>
                <div class="nth-li-tissue">
                  <ul class="dy-flex global_table_item" v-for="(item, index) in personData" :class="{'border-b': index < personData.length-1}" style="line-height:40px;">
                    <li class="dy-fx-1">{{index+1 }}</li>
                    <li class="dy-fx-2">{{item.memberName}}</li>
                    <li class="dy-fx-3">{{item.userAccount}}</li>
                    <li class="dy-fx-2">{{item.orgUserType}}</li>
                    <li class="dy-fx-2 border-l" v-show="permissions.indexOf('c188') > -1">
                      <a v-if=" item.orgUserTypeCode == 'MEMBER' " @click="setperson(item)">设为负责人</a>
                      <a v-if=" item.orgUserTypeCode == 'ADMIN' " @click="setperson(item)">设为成员</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 授权项目 -->
  <hl-dialog :visible="projectflag" :width="940" :height="490" title="授权项目" @on-close="projectflag = !projectflag">
    <div class="relative">
      <div class="pull-left" style="width: 600px;">
        <p class="line-height-34">项目列表</p>
        <div class="box-i-shadow br-4 border bg-fff text-center line-height-40">
          <div style="height:400px;overflow-y: scroll;">
            <div class="dy-flex">
              <div class="dy-fx-1 cz-center">
                <div class="check-auth cursor" :class="{'check-auth-active': allcheckProjectflag}" @click="allcheckProject"></div>
              </div>
              <div class="dy-fx-2">大区</div>
              <div class="dy-fx-2">公司</div>
              <div class="dy-fx-3">项目</div>
            </div>
            <div class="dy-flex border-t" v-for="(item, index) in allProjects">
              <div class="dy-fx-1 cz-center">
                <div class="check-auth cursor" :class="{'check-auth-active': item.flag}" @click="singleCheck(index)"></div>
              </div>
              <div class="dy-fx-2">{{ item.areaName }}</div>
              <div class="dy-fx-2">{{ item.companyName }}</div>
              <div class="dy-fx-3 ellipsis-1">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <p class="line-height-34">共{{allProjects.length}}条记录</p>
      </div>
      <div class="pull-right" style="width:224px;">
        <p class="line-height-34">项目列表</p>
        <div class="box-i-shadow br-4 border bg-fff text-center line-height-40">
          <div style="height:400px;overflow-y: scroll;">
            <div class="dy-flex">
              <div class="dy-fx-1 cz-center">序</div>
              <div class="dy-fx-3">项目</div>
              <div class="dy-fx-1">操作</div>
            </div>
            <div class="dy-flex border-t" v-for="(item, index) in partProject">
              <div class="dy-fx-1 cz-center">{{ index+1 }}</div>
              <div class="dy-fx-3 ellipsis-1">{{ item.name }}</div>
              <div class="dy-fx-1">
                <span class="icon-Gm-delete" @click="delCheck(index)"></span>
              </div>
            </div>
          </div>
        </div>
        <p class="line-height-34">共{{partProject.length}}条记录</p>
      </div>
    </div>

    <div slot="footer">
      <hl-button type="primary" v-if="status == '0'" @on-click="saveAdminProject">确定添加</hl-button>
      <hl-button type="primary" v-if="status == '1'" @on-click="saveMemberProject">确定添加</hl-button>
      <hl-button type="outline" @on-click="projectflag = !projectflag">取消</hl-button>
    </div>
  </hl-dialog>

  <div style="position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.5);z-index:998;" v-show="isshowMark"></div>
</section>

<!-- 授权权限 -->
<div class="pop box-o-shadow auth-config-pop js-accredit-show" id="auth-config-pop" v-show="isShowAuthFlag" style="zIndex:9999">
  <div class="head-pop font-16">授权权限<button class="fw-close absolute" @click="hidePop">×</button></div>
  <div class="fw-content ptb-10 pl-24 pr-24  border-t border-b">
    <ul class="auth-tab-wrap">
      <li v-for="(item,index) in tab" :class="{'active':item.selected}" @click="selectPlatform(index)">{{item.name}}</li>
    </ul>

    <div class="content-prem-pop box-i-shadow-2 br-4 mtb-10">
      <div class="row">
        <div class="col-md-3">
          <ul class="left-menu-wrapper">
            <li v-for="(item,index) in firstMenu" @click="handleSelectedFirstMenu(item,index)">
              <div class="menu-pop" :class="{active:activeIndex == index}">
                <span :class="item.icon"></span><b>{{item.name}}</b>
              </div>
            </li>
          </ul>
        </div>

        <div class="col-md-9 js-content-wrap">
          <div class="js-content-pop">
            <!-- 一级目录 -->
            <div class="set-pop">
              <div class="set-name-pop" :title="selectedFirstMenu.name">{{selectedFirstMenu.name}}</div>
              <div class="set-cont-pop">
                <span ref="firstPrivilege" :id="item.privilegeId" class="auth-item" :class="{'js-q-active': selectedFirstPrivilege.indexOf(item.privilegeId) > -1 }" v-for="(item,index) in selectedFirstMenu.privilegeList" @click="selectFirstAuthItem(item.privilegeId)">{{item.privilegeName}}</span>
              </div>
              <div class="set-selected-pop" @click="inverseFirstAuthItem">
                <i></i>
                <span>反选</span>
              </div>
            </div>
            <!-- 二级目录 -->
            <div class="set-pop-wrap">
              <div class="subset-pop" v-for="(item,index) in secondMenu">
                <div class="set-name-pop" :title="item.name">{{item.name}}</div>
                <div class="set-cont-pop">
                  <span ref="secondPrivilege" :id="item1.privilegeId" class="auth-item" :class="{'js-q-active': selectedSecondPrivilege.indexOf(item1.privilegeId) > -1 }" v-for="(item1,index1) in item.privilegeList" @click="selectSecondAuthItem(item1.privilegeId)">{{item1.privilegeName}}</span>
                </div>
                <div class="set-selected-pop" @click="inverseSecondAuthItem($event)">
                  <i></i>
                  <span>反选</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="foot-pop text-center ptb-10">
    <hl-button type="primary" @on-click="configPositionPrivilege">提交保存</hl-button>
  </div>
</div>

<script src="modules/system_config/scripts/auth_config.js" charset="utf-8"></script>
<script src="modules/user/scripts/treerbac.js" charset="utf-8"></script>
<script src="modules/user/scripts/rbac.js" charset="utf-8"></script>


<style media="screen">
  .sj-kf{
    align-items: center;
  }
  .sj-blank{
    height: 15px;
    width: 1px;
    background: #B9B9B9;
    margin:0 9px 0 17px;
  }
  .tree-padding-6{
    padding-left:60px;
  }
  .tree-padding-7{
    padding-left:70px;
  }
  .tree-padding-8{
    padding-left:80px;
  }

  .ellipsis-1 {
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
    overflow: hidden;
  }

  .auth-config-pop .set-name-pop {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .check-auth {
    width: 13px;
    height: 13px;
    position: relative;
    border: 1px solid #666;
    border-radius: 4px;
  }

  .check-auth-active {
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #5e67a5;
    width: 13px;
    height: 13px;
    border: 1px solid #5e67a5;
    border-radius: 4px;
  }

  .auto-close {
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
  }

  .auth-project {
    width: 900px;
    background: #fff;
    border-radius: 6px;
    position: relative;
  }

  .cz-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mark-auth-project {
    background: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .person-wrap li {
    line-height: 40px;
    padding-left: 12px;
  }

  .leadperson-config {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(153, 153, 153, 0.5);
  }

  .title-config {
    line-height: 45px;
    height: 45px;
    background: rgba(239, 239, 239, 1);
  }

  .person-wrap,
  .person-wrap1 {
    width: 777px;
    min-height: 400px;
    max-height: 540px;
    overflow-y: scroll;
  }

  .left-tissue {
    height: 100%;
    width: 252px;
    background: #fff;
    position: relative;
    overflow: hidden;
    overflow-y: scroll;
  }

  .tissue-button-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    display: flex;
    background: rgba(239, 239, 239, 1);
    text-align: center;
  }

  .tissue-button {
    height: 45px;
    flex: 1;
    color: rgb(165, 170, 183);
  }

  .tissue-button-active {
    color: #565E99;
    font-weight: bold;
    position: relative;
  }

  .tissue-button-active::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 2px;
    background: #565E99;
  }

  .tissue-list {
    position: absolute;
    left: 0;
    width: 100%;
    top: 45px;
    bottom: 0;
  }

  .framework-tree-wrap {
    position: relative;
    z-index: 1;
  }

  .framework-tree-list {
    line-height: 45px;
    list-style-type: dot;
  }

  .tree-pl-0 {
    padding-left: 0px !important;
  }

  .framework-title {
    position: relative;
    z-index: 1;
  }

  .tissue-border {
    position: absolute;
    left: -100px;
    bottom: 0;
    width: 400px;
  }

  .slideTopActive {
    background: rgba(247, 247, 247, 1);
  }

  .active-tissue>div>.slideTop {
    display: block;
  }

  .right-wrap-tissue {
    width: 760px;
    border-radius: 0 6px 0 0;
  }

  .active-person {
    background: rgba(247, 247, 247, 1);
  }

  .right-arrow {
    right: 5px;
    top: 0;
  }

  .icon-reg-90 {
    transform: rotate(90deg);
    right: 10px;
  }
</style>
